<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户信息</title>
</head>
<style>
  .images{
    width: 600px;
    height: 300px;
    margin: 0 auto;
    padding: 0;
  }
</style>
<script src="../../plugins/vue/vue.js"></script>
<script  src="../../plugins/axios/axios.min.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script src="../../plugins/element-ui/index.js"></script>
<body>
<div id="app">
  <template>
    <div>
      <div style="margin: 10px 0">
        <el-button type="primary" style="margin-left: 5px" @click="goBack"
        ><i class="el-icon-back"></i>返回 </el-button>
      </div>
    </div>
  </template>

  <div class="images" >
    <el-carousel :autoplay="false" trigger="click" style="height: 100%; width:380px;">
      <el-carousel-item v-for="item in images" :key="item">
        <el-image
                :src="item"
                alt="图片不见了"
                style="height: 100%; width:100%;"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>


  <el-descriptions class="margin-top"  :column="4" :size="small" border >

    <el-descriptions-item>
      <template slot="label">
        用户名
      </template>
      {{formData.userName}}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        邮箱
      </template>
      {{formData.email}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        违约次数
      </template>
      {{formData.breakCount}}
    </el-descriptions-item>
  </el-descriptions>


  <el-descriptions class="margin-top"  :column="4" :size="small" border >

    <el-descriptions-item>
      <template slot="label">
        商品名称
      </template>
      {{formData.goodsName}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        需缴纳保证金金额
      </template>
      {{formData.deposit}}元
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        起拍价
      </template>
      {{formData.startingPrice}}元
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        加价幅度
      </template>
      {{formData.priceMarkup}}元
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        类型
      </template>
      {{formData.typeName}}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        开始时间
      </template>
      {{formData.startingTime}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        结束时间
      </template>
      {{formData.endTime}}
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions class="margin-top"  :column="4" :size="small" border >

    <el-descriptions-item>
      <template slot="label">
        商品描述
      </template>
      {{formData.description}}
    </el-descriptions-item>

  </el-descriptions>
</div>
</body>

<script>
  new Vue({
    el: "#app",
    data: {
      images:[

      ],
      formData:{
      }

    },
    created(){
      var goodsId = sessionStorage.getItem("goodsId");

      if(goodsId != null){
        axios.get("/goodsInfo/detail/" + goodsId).then((res) => {
          this.formData = res.data.data;
          this.images = res.data.data.images;
        })
      }else {
        this.$message.error("商品信息不存在");
      }
    },
    methods: {
      goBack(){
        sessionStorage.removeItem("goodsId");
        history.back();
      },
    }

  })
</script>
</html>